import QtQuick 2.15
import QtQuick.Controls 2.14
import QtQuick.Controls.Styles 1.4
import QtQuick.Extras 1.4
import QtQuick.Extras.Private 1.0
import QtCharts 2.14

Item {
    width: 512
    height: 300

    Rectangle{
        x:0
        y:10
        width: 500
        height: 280
        border.width: 1
        border.color: "#33FF11"
        color: "#ddeeff"
        opacity: 0.7
        radius: 30
        // MouseArea {
        //     anchors.fill: parent
        //     onPressed: {
        //         parent.color = "#55aadd"
        //     }
        //     onReleased: {
        //         parent.color = "#11dd22"
        //         if(circularGaugeValueTimer.running === true)
        //             circularGaugeValueTimer.stop()
        //         else
        //             circularGaugeValueTimer.start()
        //     }
        // }
    }



    ChartView {
        id: chartView
        x:-5
        y:0
        width: 512
        height: 300
        title: "温湿度变化曲线(24h)"
        titleFont.bold: true
        titleFont.pixelSize: 18
        antialiasing: false
        theme : ChartView.ChartThemeBlueCerulean
        backgroundRoundness : 30
        backgroundColor: "#ddeeff"
        margins.left:1
        margins.right:5
        margins.top:1
        margins.bottom:5

        ValueAxis {
            id: valueAxisX
            min: 0                  // 设置最小值
            max: 24                 // 设置最大值
            tickCount: 9          // 设置刻度数量，系统会自动计算间隔
            labelFormat: "%.0f"     // 设置标签显示格式，%.0f 表示显示为整数
            labelsColor: "white"    // 设置标签颜色
            gridLineColor: "lightgray"   // 设置网格线颜色
            gridVisible: false      // 控制网格线是否显示
        }

        ValueAxis {
            id: valueAxisY
            min: -40                // 设置最小值
            max: 140                // 设置最大值
            tickCount: 5            // 设置刻度数量
            labelFormat: "%.0f"     // 设置标签显示格式，%.1f 表示显示一位小数
            labelsColor: "white"    // 设置标签颜色
            gridLineColor: "lightgray"   // 设置网格线颜色
            gridVisible: true      // 控制网格线是否显示
        }

        LineSeries {
            id:lineT
            name: "温度"
            color: "lightgreen"
            axisX: valueAxisX // 指定使用哪个X轴
            axisY: valueAxisY // 指定使用哪个Y轴

            XYPoint { x: 0; y: 80}
            XYPoint { x: 1; y: 11}
            XYPoint { x: 2; y: 22}
            XYPoint { x: 3; y: 73}
            XYPoint { x: 4; y: 44}
            XYPoint { x: 5; y: 50}
            XYPoint { x: 6; y: 11}
            XYPoint { x: 7; y: 72}
            XYPoint { x: 8; y: 83}
            XYPoint { x: 9; y: 94}
            XYPoint { x: 10;y: 10 }
            XYPoint { x: 11; y: 41 }
            XYPoint { x: 12; y: 81 }
            XYPoint { x: 13; y: 31 }
            XYPoint { x: 14; y: 41 }
            XYPoint { x: 15; y: 11 }
            XYPoint { x: 16; y: 91 }
            XYPoint { x: 17; y: 21 }
            XYPoint { x: 18; y: 71 }
            XYPoint { x: 19; y: 41 }
            XYPoint { x: 20; y: 62 }
            XYPoint { x: 21; y: 92 }
            XYPoint { x: 22; y: 12 }
            XYPoint { x: 23; y: 82 }
            XYPoint { x: 24; y: 22 }
        }

        LineSeries {
            id:lineH
            name: "湿度"
            color: "yellow"
            axisX: valueAxisX // 指定使用哪个X轴
            axisY: valueAxisY // 指定使用哪个Y轴

            XYPoint { x: 0; y: 81}
            XYPoint { x: 1; y: 19}
            XYPoint { x: 2; y: 22}
            XYPoint { x: 3; y: 77}
            XYPoint { x: 4; y: 44}
            XYPoint { x: 5; y: 56}
            XYPoint { x: 6; y: 19}
            XYPoint { x: 7; y: 71}
            XYPoint { x: 8; y: 88}
            XYPoint { x: 9; y: 92}
            XYPoint { x: 10;y: 10 }
            XYPoint { x: 11; y: 41 }
            XYPoint { x: 12; y: 81 }
            XYPoint { x: 13; y: 31 }
            XYPoint { x: 14; y: 81 }
            XYPoint { x: 15; y: 11 }
            XYPoint { x: 16; y: 21 }
            XYPoint { x: 17; y: 71 }
            XYPoint { x: 18; y: 41 }
            XYPoint { x: 19; y: 51 }
            XYPoint { x: 20; y: 12 }
            XYPoint { x: 21; y: 72 }
            XYPoint { x: 22; y: 82 }
            XYPoint { x: 23; y: 92 }
            XYPoint { x: 24; y: 12 }
        }
    }
}
